<template>
<div class="util">
	<el-button type="primary" plain @click="add">
		<el-icon><Plus /></el-icon>
		<span>添加区域</span>
	</el-button>
</div>
 <div>
	<el-table :data="tableData">
		<el-table-column label="区域名称" prop="name"></el-table-column>
		<el-table-column label="区域地址" prop="address"></el-table-column>
		<el-table-column label="状态" >
			<template #default = "scope">
				<el-tag type="success" v-if="scope.row.status ">正常</el-tag>
				<el-tag type="danger" v-else >异常</el-tag>
			</template>
		</el-table-column>
		<el-table-column width="310px">
			<template #default = "scope">
			<template  v-if="scope.row.status">			
				<el-button type="primary" plain size="small" @click="update(scope.row.id)">修改</el-button>
				<el-button type="danger" plain size="small" @click="del(scope.row.id)">删除</el-button>
				<el-button type="danger" plain size="small" @click="dele(scope.row.id,0)">暂停服务</el-button>
				<el-button type="success" plain size="small" @click="shopList(scope.row.id)">添加门店</el-button>
			</template>	
			<el-button v-else type="warning" plain size="small" @click="dele(scope.row.id,1)">启用</el-button>
			</template>	
		</el-table-column>	
    </el-table>
    <el-dialog v-model="dialog.show" 
		:title="dialog.title" 
		width="450px"
		:close-on-click-modal = "false">
	<Add
	 v-if="dialog.show"
	 @getTableData = "getTableData" 
	 v-model:show="dialog.show" 
	 :id="dialog.id"
	 /> 
	 </el-dialog>
	 <el-dialog
	     v-model="shopDialog.show"
	 	title="关联店铺"
	 	width="600px"
	 	:close-on-click-modal = "false">
	 	<Shop 
	 	v-if="shopDialog.show" 
	 	:regionId = "shopDialog.regionId" 
	 	v-model:show="shopDialog.show" />
	 </el-dialog>
 </div>	
</template>

<script setup>
import { Plus} from '@element-plus/icons-vue'
import { _axios } from '@/plugins/axios'
import { ref,reactive } from 'vue'
import Add from './add'
import Shop from './shop'
import { get, post } from '@/plugins/axios'
import { ElMessageBox } from 'element-plus'
import url from './util'

const dialog = reactive({
	show: false,
	title: '',
	id: null,
})
const shopDialog = reactive({
	show: false,
	regionId: null
})
const tableData = ref([])
const params = reactive({

})

function add(){
	dialog.id = null
	dialog.title = "添加权限"
	dialog.show = true	
}
function update(id){
	dialog.id = id
	dialog.title = "修改权限"
	dialog.show = true
}

function del(id) {
	ElMessageBox.confirm('删除之后无法恢复确定要删除吗','警告',{
		 type: 'warning'
	}).then(() => {
		post(url.del,{id}, content => {
			getTableData()
		})
	}).catch(() => {})
}

function dele(id,status) {
	const text = status ? '确定要启用该区域吗' : '确定要禁用该区域吗';
	ElMessageBox.confirm(text,'警告',{
		 type: 'warning'
	}).then(() => {
		post(url.dele,{id,status}, content => {
			getTableData()
			console.dir("AAAAAAAAAAAAAAAAAAAA")
		})
	}).catch(() => {})
}

function getTableData(){
	get(url.list,params,content => {
		tableData.value = content
	})
}
function shopList(regionId){
	shopDialog.regionId = regionId
	shopDialog.show = true
	console.dir(regionId)
	console.dir("CCCCC")
}
getTableData()
</script>

<style lang="scss" scoped>
.wrapper{
	height: 80vh;
	.util{
		width: 100%;
		height: 50px;
		background-color: #ffffff;
		border-radius: 4px;
		margin-bottom: 20px;
		box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
		display: flex;
		align-items: center;
		.span{
			font-size: 14px;
			margin-left: 20px;
		}
	}

}
</style>